<template>
	<div class="tpl33-header">
    <div class="search-container">
      <a href="javascript:;" class="ico-left" @click="cityDialogVisible = true"><span>{{curCity}}</span><i></i></a>
      <div class="search-wrapper">
        <div class="icon" @click="searchList">
          <!-- TODO svg换成图片 -->
          <img class="icon_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
        </div>
        <input @confirm="searchList" v-model="keyword" type="text" :placeholder="tplItemData.has_duodian?'商品搜索：请输入商品、店铺名称':'商品搜索：请输入商品关键字'" />
      </div>  
    </div>
    <a-map @getLoaction="getLoactionFn" />
    <location-city ref="locationCity" @change="cityChangeFn" :visible.sync="cityDialogVisible"></location-city>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { Swipe, SwipeItem } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
import aMap from '../../../../storeList/components/amap'
import locationCity from '@/components/locationCity'
export default Vue.extend({
    name: 'index',
    components: {
      aMap,
      locationCity
    },
    data() {
      return {
        imgadvWxH: '0',
        showIndicators: true,
        autoplay: true,
        keyword: '',
        curCity: '请选择',
        cityDialogVisible: false
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
          openPage(link)
      },
      // TODO 小程序swiper获取图片高度
      onImageLoad(event){
        const imgHeight = event.detail.height
        if(imgHeight > parseFloat(this.imgadvWxH)){
          this.imgadvWxH = imgHeight+'px'
        }
      },
      searchList() {
        this.$JumpName(this, 'item-list', { title: this.keyword })
      },
      // 地图获取定位
      getLoactionFn(val) {
          this.curCity = val.address_component.district
        this.$refs.locationCity.curCity = this.curCity
        this.$emit('getLoaction', { lat: val.location.lat, lng: val.location.lng })
      },
      // 选择了城市之后抛出的城市id
      cityChangeFn(val) {
        this.curCity = val.cityName
        this.$emit('change', val)
      }
    },

    created() {
  
    }
  })
</script>

<style lang='scss'>
 @import "src/styles/mixin";
.tpl33-header{
  position: relative;
  .search-container{
    width: 100%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20%;
    text-align: center;
    padding: 10px 16px 10px 0;
    display: flex;
    .ico-left{
      text-align: center;
      color: #909090;
      padding: 0 8px 0 16px;
      font-size: 26px;
      width: 136px;
      display: flex;
      align-items: center;
      position: relative;
      height: 60px;
      line-height: 60px;
      span {
        display: inline-block;
        width: 78px;
        max-height: 60px;
        overflow: hidden;
      }
      i {
        display: inline-block;
        height: 12px;
        width: 22px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 10px;
        background-image: url('https://img.wifenxiao.com/h5-wfx/images/diy/down.png');
        vertical-align: 0;
        height: 60px;
      }
    }
    .search-wrapper{
      position:relative;
      width: 90%;
      margin: 0 auto;
      height: 60px;
      border-radius: 30px;
      border: 1px solid #FAFAFA;
      background: #FAFAFA;
      display: flex;
      align-items: center;
      padding: 0 20px;
      .icon {
        color:#999999;
        font-size: 24px;
        margin-right: 10px;
        .icon_search{
          width:32px;
          height:32px;
        }
      }
      @include placeColor(#999);
      input {
        display: inline-block;
        width:100%;
        height: 60px;
        border:0;
        background: transparent;
        box-sizing: border-box;
      }
    }
  }
  
}

</style>
